<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-dv-geo/Geo.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-$ui_dv_my-dv-bar.html">$ui/dv/my-dv-bar</a></li><li><a href="module-$ui_dv_my-dv-box.html">$ui/dv/my-dv-box</a></li><li><a href="module-$ui_dv_my-dv-fill.html">$ui/dv/my-dv-fill</a></li><li><a href="module-$ui_dv_my-dv-geo.html">$ui/dv/my-dv-geo</a></li><li><a href="module-$ui_dv_my-dv-icon.html">$ui/dv/my-dv-icon</a></li><li><a href="module-$ui_dv_my-dv-indicator.html">$ui/dv/my-dv-indicator</a></li><li><a href="module-$ui_dv_my-dv-line.html">$ui/dv/my-dv-line</a></li><li><a href="module-$ui_dv_my-dv-loading.html">$ui/dv/my-dv-loading</a></li><li><a href="module-$ui_dv_my-dv-page.html">$ui/dv/my-dv-page</a></li><li><a href="module-$ui_dv_my-dv-pictorial.html">$ui/dv/my-dv-pictorial</a></li><li><a href="module-$ui_dv_my-dv-pie.html">$ui/dv/my-dv-pie</a></li><li><a href="module-$ui_dv_my-dv-progress.html">$ui/dv/my-dv-progress</a></li><li><a href="module-$ui_dv_my-dv-radar.html">$ui/dv/my-dv-radar</a></li><li><a href="module-$ui_dv_my-dv-rank.html">$ui/dv/my-dv-rank</a></li><li><a href="module-$ui_dv_my-dv-ring.html">$ui/dv/my-dv-ring</a></li><li></li><li><a href="module-$ui_dv_my-dv-screen.html">$ui/dv/my-dv-screen</a></li><li><a href="module-$ui_dv_my-dv-starry.html">$ui/dv/my-dv-starry</a></li><li><a href="module-$ui_dv_my-dv-text.html">$ui/dv/my-dv-text</a></li><li><a href="module-$ui_dv_my-dv-title.html">$ui/dv/my-dv-title</a></li></ul><h3>Global</h3><ul><li><a href="global.html#darken">darken</a></li><li><a href="global.html#fade">fade</a></li><li><a href="global.html#getCircleRadianPoint">getCircleRadianPoint</a></li><li><a href="global.html#getColorByKeyword">getColorByKeyword</a></li><li><a href="global.html#getColorFromRgbValue">getColorFromRgbValue</a></li><li><a href="global.html#getOpacity">getOpacity</a></li><li><a href="global.html#getRgbaValue">getRgbaValue</a></li><li><a href="global.html#getRgbValue">getRgbValue</a></li><li><a href="global.html#getRgbValueFromHex">getRgbValueFromHex</a></li><li><a href="global.html#getRgbValueFromRgb">getRgbValueFromRgb</a></li><li><a href="global.html#lighten">lighten</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#toHex">toHex</a></li><li><a href="global.html#toRgb">toRgb</a></li><li><a href="global.html#validator">validator</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-dv-geo/Geo.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;Box class="my-dv-chart my-dv-geo"
       default-width="800px"
       default-height="600px"
       v-bind="$attrs">
    &lt;Loading v-if="loading" :zoom="0.6">&lt;/Loading>
    &lt;MyChartMap v-else
                ref="chart"
                v-on="$listeners"
                :on-register="onRegister"
                :debug="debug"
                :theme="theme"
                :extend="options"
                :settings="mapSettings"
                :width="`${width}px`"
                :height="`${height}px`"
                :register="json"
                :map="mapGeoName"
                :coords="coords"
                :data="mapData">&lt;/MyChartMap>
  &lt;/Box>
&lt;/template>

&lt;script>
  /**
   * 矢量地图
   * @module $ui/dv/my-dv-geo
   */
  import {MyChartMap} from '$ui/charts'
  import Chart from '../../mixins/Chart'
  import Loading from '../my-dv-loading'
  import merge from 'lodash/merge'
  import defaults from './defaults'

  /**
   * 属性参数
   * @member props
   * @property {Array} [columns] 数据列
   * @property {Array} [rows] 数据行
   * @property {Function} [loader] 数据加载函数，必须返回Promise
   * @property {Object} [settings] 图表的私有设置
   * @property {Object|Function} [extend] 扩展图表参数选项
   * @property {boolean} [debug] 开启打印调试信息
   * @property {Object|Function} [json] geoJSON或构造函数
   * @property {string} [name] 地图注册名称，默认取组件实例的id
   * @property {Object} [type] 地图序列类型映射，{‘数据维度名称’:'系列类型 map|lines|scatter|effectScatter'}
   * @property {Object|Function} [typeHelper]系列属性构造回调函数，参数： {name,type,index,columns,columnIndex,data}
   * @property {Object|Function} [dataHelper] 系列数据构造回调函数，参数：row, i, {type, name, index}
   * @property {Object} [visual] visualMap 配置
   * @property {Object|Array} [coords] 经纬度配置
   * @property {Function} [onRegister] 地图注册完成回调
   */
  export default {
    name: 'MyDvGeo',
    mixins: [Chart],
    inheritAttrs: false,
    components: {
      Loading,
      MyChartMap
    },
    props: {
      json: [Object, Function],
      name: String,
      type: Object,
      typeHelper: [Object, Function],
      dataHelper: [Object, Function],
      visual: Object,
      coords: [Object, Array],
      onRegister: Function
    },
    data() {
      return {}
    },
    computed: {
      mapGeoName() {
        return this.name || `map${this._uid}`
      },
      mapSettings() {
        return {
          type: {
            ...this.type
          },
          typeHelper: this.mapTypeHelper,
          dataHelper: this.dataHelper
        }
      },
      mapData() {
        const dataArray = this.chartData ? [].concat(this.chartData) : []
        const hasMap = Object.values(this.type || {}).includes('map')
        if (!hasMap) {
          dataArray.unshift({
            columns: ['region', ''],
            rows: []
          })
        }
        return dataArray
      },
      options() {
        const extend = typeof this.extend === 'function' ? this.extend() : this.extend

        return Object.freeze(merge({
          visualMap: this.getVisualMap(),
          tooltip: {
            formatter: this.tooltipFormatter
          }
        }, extend))
      }
    },
    watch: {
      name() {
        this.load()
      }
    },
    methods: {
      tooltipFormatter(res) {
        const {seriesName, name, value} = res
        let sn = seriesName
        if (!sn) {
          const series = this.$refs.chart.chart.getOption().series || []
          const item = series.find(n => (n.type === 'map' &amp;&amp; !!n.name))
          sn = item?.name || ''
        }
        if (value) {
          if (Array.isArray(value)) {
            const val = value[value.length - 1]
            return val ? `${name}&lt;br/> ${sn}: ${val}` : `${name}`
          } else {
            return `${name}&lt;br/> ${sn}: ${value}`
          }
        }
        return `${name}`
      },
      getVisualMap() {
        if (this.visual === null) return null
        return {
          show: false,
          ...this.visual
        }
      },
      mapTypeHelper(res) {
        const series = typeof this.typeHelper === 'function' ? this.typeHelper(res) : this.typeHelper
        return merge({}, defaults[res.type] || {}, series || {})
      }
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Nov 17 2020 17:07:28 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
